<template>
  <div class="user-view">
    <!-- 个人中心头部导航栏 -->
    <van-nav-bar title="个人中心" />
    <!-- 头像及名字 -->
    <div class="head-portrait">
      <van-image
       width="150"
       height="150"
       src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
       radius="50%"
      />
      <div class="name">
        name: xiaoli
      </div>
    </div>
    <!-- 个人中心单元格 -->
    <van-cell-group class="user-list">
      <van-cell 
       :title="item.title" 
       :icon="item.icon" 
       v-for="item in userCellList" 
       :key="item.id" 
       is-link 
       size="large"
       :to="item.routePath"
      />
    </van-cell-group>
  </div>
  <!-- 退出登录 -->
  <div class="btn-logOut">
    <van-button round size="large" type="primary" @click="logOut" >退出登录</van-button>
  </div>
</template>

<script setup lang="ts">
  // 引入
  import {userCellList} from '../../model/userCell'
  import { useBaseStore } from '../../store';
  // 创建实例
  const baseStore = useBaseStore()
  const router = useRouter();
  // 退出登录
  let logOut = ()=>{
    localStorage.removeItem('token');
    baseStore.nowAct = 0;
    router.push("/index/home")
  }
</script>

<style scoped>
  .user-view{
    width: 95%;
    margin: 0 auto 0;
    .head-portrait{
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .name{
      margin-top: 10px;
    }
    .user-list{
      margin-top: 20px;
    }
    .btn-logOut{
      width:90px;
    }
  }
</style>
